<template>
  <div>
    <span class="el-form-item__label">{{ $t("formgen.examConfig.valueScore") }}</span>
    <el-row
      v-for="option in getOptionLength - 1"
      :key="option"
      class="mt10"
    >
      <el-col :span="7">
        <span class="extra-small-font-size text-secondary-color">{{ $t("formgen.examConfig.valueScore") }}{{ option }}</span>
      </el-col>
      <el-col :span="10">
        <el-input-number
          v-model="activeData.examConfig.scoreList[option - 1]"
          :min="0"
          :step="0.1"
          @change="handleOptionScoreChange"
        />
      </el-col>
      <el-input
        class="mt10"
        :placeholder="$t('formgen.examConfig.answerPlaceholder')"
        v-model="activeData.examConfig.answer[option - 1]"
      ></el-input>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { computed, onBeforeMount, watch } from "vue";

const props = defineProps({
  activeData: {
    type: Object,
    default: () => {}
  }
});

onBeforeMount(() => {
  // 多分值字段
  if (!props.activeData.examConfig.scoreList) {
    props.activeData.examConfig.scoreList = [];
  }
  if (!props.activeData.examConfig.answer) {
    props.activeData.examConfig.answer = [];
  }
});

watch(
  () => props.activeData.input,
  () => {
    handleOptionScoreChange();
    // 分数数组去除多余的
    if (props.activeData.examConfig.scoreList.length > getOptionLength.value) {
      props.activeData.examConfig.scoreList = props.activeData.examConfig.scoreList.slice(0, getOptionLength.value);
      props.activeData.examConfig.answer = props.activeData.examConfig.answer.slice(0, getOptionLength.value);
    }
  },
  {
    deep: true
  }
);

const getOptionLength = computed(() => {
  return props.activeData.input.split("$input").length;
});

// 计算分数
const handleOptionScoreChange = () => {
  let score = 0;
  props.activeData.examConfig.scoreList.forEach((item: number) => {
    score += Number(item);
  });
  props.activeData.examConfig.score = score;
};
</script>
<style scoped lang="scss"></style>
